<template>
  <div class="order-list-container">
    <!-- 搜索筛选区域 -->
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="订单号">
          <el-input
            v-model="searchForm.orderNumber"
            placeholder="请输入订单号"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="用户名">
          <el-input
            v-model="searchForm.username"
            placeholder="请输入用户名"
            clearable
            style="width: 150px"
          />
        </el-form-item>

        <el-form-item label="订单状态">
          <el-select
            v-model="searchForm.status"
            placeholder="选择订单状态"
            clearable
            style="width: 120px"
          >
            <el-option label="全部" value="" />
            <el-option label="待支付" value="pending" />
            <el-option label="已支付" value="paid" />
            <el-option label="已取消" value="cancelled" />
            <el-option label="已退款" value="refunded" />
            <el-option label="支付失败" value="failed" />
          </el-select>
        </el-form-item>

        <el-form-item label="支付方式">
          <el-select
            v-model="searchForm.paymentMethod"
            placeholder="选择支付方式"
            clearable
            style="width: 120px"
          >
            <el-option label="全部" value="" />
            <el-option label="微信支付" value="wechat" />
            <el-option label="支付宝" value="alipay" />
            <el-option label="银行卡" value="bank" />
            <el-option label="余额支付" value="balance" />
          </el-select>
        </el-form-item>

        <el-form-item label="金额范围">
          <el-input-number
            v-model="searchForm.minAmount"
            :min="0"
            :precision="2"
            placeholder="最小金额"
            style="width: 120px"
          />
          <span style="margin: 0 8px">-</span>
          <el-input-number
            v-model="searchForm.maxAmount"
            :min="0"
            :precision="2"
            placeholder="最大金额"
            style="width: 120px"
          />
        </el-form-item>

        <el-form-item label="创建时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 240px"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <IconifyIconOffline icon="ep:search" class="mr-1" />
            搜索
          </el-button>
          <el-button @click="handleReset">
            <IconifyIconOffline icon="ep:refresh" class="mr-1" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮区域 -->
    <el-card class="action-card" shadow="never">
      <div class="action-bar">
        <div class="action-left">
          <el-button type="success" @click="handleExport">
            <IconifyIconOffline icon="ep:download" class="mr-1" />
            导出订单
          </el-button>
          <el-button
            type="warning"
            :disabled="selectedOrders.length === 0"
            @click="handleBatchRefund"
          >
            <IconifyIconOffline icon="ep:money" class="mr-1" />
            批量退款
          </el-button>
          <el-button type="info" @click="handleStatistics">
            <IconifyIconOffline icon="ep:data-analysis" class="mr-1" />
            统计分析
          </el-button>
        </div>

        <div class="action-right">
          <el-button circle @click="handleRefresh">
            <IconifyIconOffline icon="ep:refresh" />
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 订单列表 -->
    <el-card class="table-card" shadow="never">
      <el-table
        v-loading="loading"
        :data="orderList"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />

        <el-table-column prop="orderNumber" label="订单号" width="180">
          <template #default="{ row }">
            <el-link type="primary" @click="handleView(row)">
              {{ row.orderNumber }}
            </el-link>
          </template>
        </el-table-column>

        <el-table-column prop="user" label="用户信息" width="150">
          <template #default="{ row }">
            <div class="user-info">
              <el-avatar :size="30" :src="row.user.avatar">
                <IconifyIconOffline icon="ep:user" />
              </el-avatar>
              <div class="user-detail">
                <div class="username">{{ row.user.username }}</div>
                <div class="phone">{{ row.user.phone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="product" label="商品信息" min-width="200">
          <template #default="{ row }">
            <div class="product-info">
              <img :src="row.product.image" class="product-image" />
              <div class="product-detail">
                <div class="product-name">{{ row.product.name }}</div>
                <div class="product-type">
                  {{ getProductTypeText(row.product.type) }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="amount"
          label="订单金额"
          width="120"
          align="right"
        >
          <template #default="{ row }">
            <span class="amount">¥{{ row.amount.toFixed(2) }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="订单状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusColor(row.status)" size="small">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="paymentMethod" label="支付方式" width="100">
          <template #default="{ row }">
            <div v-if="row.paymentMethod" class="payment-method">
              <IconifyIconOffline
                :icon="getPaymentIcon(row.paymentMethod)"
                class="payment-icon"
              />
              {{ getPaymentText(row.paymentMethod) }}
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" width="160">
          <template #default="{ row }">
            {{ formatDateTime(row.createTime) }}
          </template>
        </el-table-column>

        <el-table-column prop="payTime" label="支付时间" width="160">
          <template #default="{ row }">
            {{ row.payTime ? formatDateTime(row.payTime) : "-" }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              size="small"
              @click="handleView(row)"
            >
              查看
            </el-button>
            <el-button
              v-if="row.status === 'paid'"
              type="warning"
              link
              size="small"
              @click="handleRefund(row)"
            >
              退款
            </el-button>
            <el-button
              v-if="row.status === 'pending'"
              type="danger"
              link
              size="small"
              @click="handleCancel(row)"
            >
              取消
            </el-button>
            <el-dropdown @command="command => handleMoreAction(command, row)">
              <el-button type="primary" link size="small">
                更多
                <IconifyIconOffline icon="ep:arrow-down" class="ml-1" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="detail">
                    <IconifyIconOffline icon="ep:view" class="mr-1" />
                    订单详情
                  </el-dropdown-item>
                  <el-dropdown-item command="log">
                    <IconifyIconOffline icon="ep:document" class="mr-1" />
                    操作日志
                  </el-dropdown-item>
                  <el-dropdown-item command="print" divided>
                    <IconifyIconOffline icon="ep:printer" class="mr-1" />
                    打印订单
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 订单详情弹窗 -->
    <el-dialog v-model="detailVisible" title="订单详情" width="800px">
      <div v-if="currentOrder" class="order-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号">{{
            currentOrder.orderNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="getStatusColor(currentOrder.status)" size="small">
              {{ getStatusText(currentOrder.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户名">{{
            currentOrder.user.username
          }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{
            currentOrder.user.phone
          }}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{
            currentOrder.product.name
          }}</el-descriptions-item>
          <el-descriptions-item label="商品类型">{{
            getProductTypeText(currentOrder.product.type)
          }}</el-descriptions-item>
          <el-descriptions-item label="订单金额"
            >¥{{ currentOrder.amount.toFixed(2) }}</el-descriptions-item
          >
          <el-descriptions-item label="支付方式">
            <span v-if="currentOrder.paymentMethod">
              <IconifyIconOffline
                :icon="getPaymentIcon(currentOrder.paymentMethod)"
                class="mr-1"
              />
              {{ getPaymentText(currentOrder.paymentMethod) }}
            </span>
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{
            formatDateTime(currentOrder.createTime)
          }}</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{
            currentOrder.payTime ? formatDateTime(currentOrder.payTime) : "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">
            {{ currentOrder.remark || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <!-- 退款弹窗 -->
    <el-dialog v-model="refundVisible" title="订单退款" width="500px">
      <div v-if="currentOrder" class="refund-form">
        <el-form :model="refundForm" label-width="100px">
          <el-form-item label="订单号">
            <el-input v-model="currentOrder.orderNumber" disabled />
          </el-form-item>

          <el-form-item label="订单金额">
            <el-input v-model="currentOrder.amount" disabled>
              <template #prepend>¥</template>
            </el-input>
          </el-form-item>

          <el-form-item label="退款金额">
            <el-input-number
              v-model="refundForm.amount"
              :min="0"
              :max="currentOrder.amount"
              :precision="2"
              style="width: 100%"
            />
          </el-form-item>

          <el-form-item label="退款原因">
            <el-select
              v-model="refundForm.reason"
              placeholder="选择退款原因"
              style="width: 100%"
            >
              <el-option label="用户申请退款" value="user_request" />
              <el-option label="活动取消" value="event_cancelled" />
              <el-option label="系统错误" value="system_error" />
              <el-option label="重复支付" value="duplicate_payment" />
              <el-option label="其他原因" value="other" />
            </el-select>
          </el-form-item>

          <el-form-item label="退款说明">
            <el-input
              v-model="refundForm.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入退款说明"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <el-button @click="refundVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitRefund"
          >确认退款</el-button
        >
      </template>
    </el-dialog>

    <!-- 统计分析弹窗 -->
    <el-dialog v-model="statisticsVisible" title="订单统计分析" width="1000px">
      <div class="statistics-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">{{ statistics.totalOrders }}</div>
                <div class="stat-label">总订单数</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">
                  ¥{{ statistics.totalAmount.toFixed(2) }}
                </div>
                <div class="stat-label">总交易额</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">{{ statistics.paidOrders }}</div>
                <div class="stat-label">已支付订单</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">
                  {{ (statistics.paymentRate * 100).toFixed(1) }}%
                </div>
                <div class="stat-label">支付成功率</div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <div class="chart-container" style="margin-top: 20px">
          <div ref="chartRef" style="width: 100%; height: 400px" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { IconifyIconOffline } from "@/components/ReIcon";
import dayjs from "dayjs";
import * as echarts from "echarts";

// 搜索表单
const searchForm = reactive({
  orderNumber: "",
  username: "",
  status: "",
  paymentMethod: "",
  minAmount: null,
  maxAmount: null,
  dateRange: []
});

// 分页信息
const pagination = reactive({
  page: 1,
  size: 20,
  total: 0
});

// 状态
const loading = ref(false);
const selectedOrders = ref([]);
const detailVisible = ref(false);
const refundVisible = ref(false);
const statisticsVisible = ref(false);
const currentOrder = ref(null);
const chartRef = ref();

// 退款表单
const refundForm = reactive({
  amount: 0,
  reason: "",
  remark: ""
});

// 统计数据
const statistics = reactive({
  totalOrders: 0,
  totalAmount: 0,
  paidOrders: 0,
  paymentRate: 0
});

// 订单列表数据
const orderList = ref([
  {
    id: 1,
    orderNumber: "ORD202401150001",
    user: {
      id: 1,
      username: "张三",
      phone: "13800138001",
      avatar:
        "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=male%20user%20avatar&image_size=square"
    },
    product: {
      id: 1,
      name: "春季篮球赛报名费",
      type: "activity",
      image:
        "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=basketball%20tournament%20poster&image_size=square"
    },
    amount: 50.0,
    status: "paid",
    paymentMethod: "wechat",
    createTime: "2024-01-15 10:30:00",
    payTime: "2024-01-15 10:32:15",
    remark: "用户正常报名支付"
  },
  {
    id: 2,
    orderNumber: "ORD202401150002",
    user: {
      id: 2,
      username: "李四",
      phone: "13800138002",
      avatar:
        "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=female%20user%20avatar&image_size=square"
    },
    product: {
      id: 2,
      name: "羽毛球俱乐部会员费",
      type: "membership",
      image:
        "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=badminton%20club%20membership&image_size=square"
    },
    amount: 200.0,
    status: "pending",
    paymentMethod: null,
    createTime: "2024-01-15 14:20:00",
    payTime: null,
    remark: ""
  },
  {
    id: 3,
    orderNumber: "ORD202401150003",
    user: {
      id: 3,
      username: "王五",
      phone: "13800138003",
      avatar:
        "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=young%20user%20avatar&image_size=square"
    },
    product: {
      id: 3,
      name: "游泳培训课程",
      type: "training",
      image:
        "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=swimming%20training%20course&image_size=square"
    },
    amount: 300.0,
    status: "refunded",
    paymentMethod: "alipay",
    createTime: "2024-01-14 16:45:00",
    payTime: "2024-01-14 16:47:30",
    remark: "用户申请退款，已处理"
  },
  {
    id: 4,
    orderNumber: "ORD202401150004",
    user: {
      id: 4,
      username: "赵六",
      phone: "13800138004",
      avatar:
        "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=athlete%20user%20avatar&image_size=square"
    },
    product: {
      id: 4,
      name: "足球比赛报名费",
      type: "match",
      image:
        "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=football%20match%20registration&image_size=square"
    },
    amount: 80.0,
    status: "failed",
    paymentMethod: "bank",
    createTime: "2024-01-13 09:15:00",
    payTime: null,
    remark: "支付失败，银行卡余额不足"
  }
]);

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  return dayjs(dateTime).format("YYYY-MM-DD HH:mm");
};

// 获取订单状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: "待支付",
    paid: "已支付",
    cancelled: "已取消",
    refunded: "已退款",
    failed: "支付失败"
  };
  return statusMap[status] || status;
};

// 获取订单状态颜色
const getStatusColor = (
  status: string
): "success" | "primary" | "warning" | "danger" | "info" => {
  const colorMap: Record<
    string,
    "success" | "primary" | "warning" | "danger" | "info"
  > = {
    pending: "warning",
    paid: "success",
    cancelled: "info",
    refunded: "danger",
    failed: "danger"
  };
  return colorMap[status] || "info";
};

// 获取商品类型文本
const getProductTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    activity: "活动报名",
    membership: "会员费",
    training: "培训课程",
    match: "比赛报名",
    equipment: "器材购买"
  };
  return typeMap[type] || type;
};

// 获取支付方式文本
const getPaymentText = (method: string) => {
  const methodMap: Record<string, string> = {
    wechat: "微信支付",
    alipay: "支付宝",
    bank: "银行卡",
    balance: "余额支付"
  };
  return methodMap[method] || method;
};

// 获取支付方式图标
const getPaymentIcon = (method: string) => {
  const iconMap: Record<string, string> = {
    wechat: "ri:wechat-pay-line",
    alipay: "ri:alipay-line",
    bank: "ep:credit-card",
    balance: "ep:wallet"
  };
  return iconMap[method] || "ep:money";
};

// 搜索
const handleSearch = () => {
  pagination.page = 1;
  loadOrderList();
};

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    orderNumber: "",
    username: "",
    status: "",
    paymentMethod: "",
    minAmount: null,
    maxAmount: null,
    dateRange: []
  });
  handleSearch();
};

// 导出订单
const handleExport = () => {
  ElMessage.success("导出成功");
};

// 批量退款
const handleBatchRefund = () => {
  ElMessage.info("批量退款功能开发中");
};

// 统计分析
const handleStatistics = () => {
  // 计算统计数据
  statistics.totalOrders = orderList.value.length;
  statistics.totalAmount = orderList.value.reduce(
    (sum, order) => sum + order.amount,
    0
  );
  statistics.paidOrders = orderList.value.filter(
    order => order.status === "paid"
  ).length;
  statistics.paymentRate =
    statistics.totalOrders > 0
      ? statistics.paidOrders / statistics.totalOrders
      : 0;

  statisticsVisible.value = true;

  nextTick(() => {
    initChart();
  });
};

// 刷新
const handleRefresh = () => {
  loadOrderList();
};

// 选择变化
const handleSelectionChange = (selection: any[]) => {
  selectedOrders.value = selection;
};

// 查看订单
const handleView = (order: any) => {
  currentOrder.value = order;
  detailVisible.value = true;
};

// 退款
const handleRefund = (order: any) => {
  currentOrder.value = order;
  refundForm.amount = order.amount;
  refundForm.reason = "";
  refundForm.remark = "";
  refundVisible.value = true;
};

// 取消订单
const handleCancel = async (order: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要取消订单 "${order.orderNumber}" 吗？`,
      "确认取消",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    order.status = "cancelled";
    ElMessage.success("订单已取消");
  } catch {
    // 用户取消
  }
};

// 更多操作
const handleMoreAction = (command: string, order: any) => {
  switch (command) {
    case "detail":
      handleView(order);
      break;
    case "log":
      ElMessage.info("操作日志功能开发中");
      break;
    case "print":
      ElMessage.info("打印订单功能开发中");
      break;
  }
};

// 提交退款
const handleSubmitRefund = () => {
  if (!refundForm.reason) {
    ElMessage.warning("请选择退款原因");
    return;
  }

  if (refundForm.amount <= 0) {
    ElMessage.warning("退款金额必须大于0");
    return;
  }

  if (currentOrder.value) {
    currentOrder.value.status = "refunded";
  }

  ElMessage.success("退款申请已提交");
  refundVisible.value = false;
};

// 分页大小变化
const handleSizeChange = (size: number) => {
  pagination.size = size;
  loadOrderList();
};

// 当前页变化
const handleCurrentChange = (page: number) => {
  pagination.page = page;
  loadOrderList();
};

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;

  const chart = echarts.init(chartRef.value);

  const option = {
    title: {
      text: "订单状态分布",
      left: "center"
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      orient: "vertical",
      left: "left"
    },
    series: [
      {
        name: "订单状态",
        type: "pie",
        radius: "50%",
        data: [
          { value: statistics.paidOrders, name: "已支付" },
          {
            value: orderList.value.filter(o => o.status === "pending").length,
            name: "待支付"
          },
          {
            value: orderList.value.filter(o => o.status === "cancelled").length,
            name: "已取消"
          },
          {
            value: orderList.value.filter(o => o.status === "refunded").length,
            name: "已退款"
          },
          {
            value: orderList.value.filter(o => o.status === "failed").length,
            name: "支付失败"
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };

  chart.setOption(option);
};

// 加载订单列表
const loadOrderList = async () => {
  loading.value = true;
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500));
    pagination.total = 100;
  } catch (error) {
    ElMessage.error("加载订单列表失败");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadOrderList();
});
</script>

<style scoped lang="scss">
.order-list-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.search-card,
.action-card,
.table-card {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.search-form {
  .el-form-item {
    margin-bottom: 16px;
  }
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .action-left {
    display: flex;
    gap: 8px;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;

  .user-detail {
    .username {
      font-weight: 500;
      color: #303133;
    }

    .phone {
      font-size: 12px;
      color: #909399;
    }
  }
}

.product-info {
  display: flex;
  align-items: center;
  gap: 8px;

  .product-image {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
  }

  .product-detail {
    .product-name {
      font-weight: 500;
      color: #303133;
    }

    .product-type {
      font-size: 12px;
      color: #909399;
    }
  }
}

.amount {
  font-weight: 600;
  color: #f56c6c;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 4px;

  .payment-icon {
    font-size: 16px;
  }
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.order-detail {
  .el-descriptions {
    margin-bottom: 20px;
  }
}

.refund-form {
  .el-form-item {
    margin-bottom: 20px;
  }
}

.statistics-content {
  .stat-card {
    text-align: center;

    .stat-item {
      .stat-value {
        font-size: 24px;
        font-weight: 600;
        color: #409eff;
        margin-bottom: 8px;
      }

      .stat-label {
        font-size: 14px;
        color: #909399;
      }
    }
  }
}

@media (max-width: 768px) {
  .order-list-container {
    padding: 10px;
  }

  .search-form {
    .el-form-item {
      width: 100%;
      margin-bottom: 12px;

      .el-input,
      .el-select,
      .el-date-picker,
      .el-input-number {
        width: 100% !important;
      }
    }
  }

  .action-bar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;

    .action-left {
      flex-wrap: wrap;
    }

    .action-right {
      align-self: flex-end;
    }
  }
}
</style>
